html {
  box-sizing: border-box;
  //根元素字体大小；10 / 16 = 62.5%，采用rem单位时，1rem = 10px
  font-size: 62.5%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  font-family: sans-serif;
}

.wrapper {
  height: 100%;
  display: grid;
  place-content: center;
  grid-template-columns: repeat(3, auto);
  background-color: #f2e9e1;
  img {
    --s: 14px;
    width: calc(3 * 4 * var(--s));
    aspect-ratio: 1;
    object-fit: cover;
    padding: var(--s);
    border: var(--s) solid #0000;
    background: #bf4d28;
    border-radius: calc(3.5 * var(--s));
    mask: radial-gradient(
        calc(sqrt(2) * var(--s)),
        #000 calc(100% - 1px),
        #0000
      ),
      conic-gradient(#000 0 0) content-box,
      radial-gradient(
          calc(sqrt(2) * var(--s)),
          #0000 100%,
          #000 calc(100% + 1px)
        )
        var(--s) var(--s) padding-box;
    mask-size: calc(4 * var(--s)) calc(4 * var(--s));
    &:nth-of-type(1) {
      transform: translate(var(--s), var(--s));
    }
    &:nth-of-type(2) {
      transform: translate(0, calc(-1 * var(--s)));
      width: calc(4 * 4 * var(--s));
      height: calc(3 * 4 * var(--s));
    }
    &:nth-of-type(3) {
      transform: translate(calc(-1 * var(--s)), var(--s));
    }
    &:nth-of-type(4) {
      transform: translate(calc(3 * var(--s)), 0);
    }
    &:nth-of-type(5) {
      transform: translate(0, calc(-2 * var(--s)));
      margin: auto;
      height: calc(4 * 4 * var(--s));
    }
    &:nth-of-type(6) {
      transform: translate(calc(-3 * var(--s)), 0);
    }
  }
}
